<template>
  <div class="equipment-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button text @click="handleBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>设备详情</h2>
        <el-tag :type="getStatusColor(equipment.status)">
          {{ getStatusName(equipment.status) }}
        </el-tag>
      </div>
      <div class="header-actions">
        <el-button @click="handlePrint">
          <el-icon><Printer /></el-icon>
          打印
        </el-button>
        <el-button @click="handleQRCode">
          <el-icon><Postcard /></el-icon>
          生成二维码
        </el-button>
        <el-button type="primary" @click="handleEdit">
          <el-icon><Edit /></el-icon>
          编辑
        </el-button>
      </div>
    </div>

    <el-row :gutter="20">
      <!-- 左侧：设备信息 -->
      <el-col :span="16">
        <!-- 基本信息 -->
        <el-card class="info-card">
          <template #header>
            <span>基本信息</span>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="设备编号">{{ equipment.code }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ equipment.name }}</el-descriptions-item>
            <el-descriptions-item label="设备分类">
              <el-tag>{{ getCategoryName(equipment.category) }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="规格型号">{{ equipment.model }}</el-descriptions-item>
            <el-descriptions-item label="品牌">{{ equipment.brand || '-' }}</el-descriptions-item>
            <el-descriptions-item label="制造商">{{ equipment.manufacturer || '-' }}</el-descriptions-item>
            <el-descriptions-item label="购置日期">{{ equipment.purchaseDate }}</el-descriptions-item>
            <el-descriptions-item label="投产日期">{{ equipment.commissionDate }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- OEE实时数据 -->
        <el-card class="info-card">
          <template #header>
            <span>设备效率(OEE)</span>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="oee-stat">
                <div class="oee-label">综合效率</div>
                <div class="oee-value" :style="{ color: getOEEColor(equipment.oee) }">
                  {{ equipment.oee }}%
                </div>
                <el-progress :percentage="equipment.oee" :color="getOEEColor(equipment.oee)" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="oee-stat">
                <div class="oee-label">时间稼动率</div>
                <div class="oee-value">85%</div>
                <el-progress :percentage="85" color="#67c23a" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="oee-stat">
                <div class="oee-label">性能稼动率</div>
                <div class="oee-value">92%</div>
                <el-progress :percentage="92" color="#409eff" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="oee-stat">
                <div class="oee-label">良品率</div>
                <div class="oee-value">98%</div>
                <el-progress :percentage="98" color="#e6a23c" />
              </div>
            </el-col>
          </el-row>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="8">
              <el-statistic title="累计运行时长" :value="equipment.runningHours" suffix="小时" />
            </el-col>
            <el-col :span="8">
              <el-statistic title="故障次数" :value="12" suffix="次" />
            </el-col>
            <el-col :span="8">
              <el-statistic title="维护次数" :value="28" suffix="次" />
            </el-col>
          </el-row>
        </el-card>

        <!-- 技术参数 -->
        <el-card class="info-card">
          <template #header>
            <span>技术参数</span>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="额定功率">{{ equipment.powerRating || '-' }}</el-descriptions-item>
            <el-descriptions-item label="额定电压">{{ equipment.voltage || '-' }}</el-descriptions-item>
            <el-descriptions-item label="生产能力">{{ equipment.capacity || '-' }}</el-descriptions-item>
            <el-descriptions-item label="设备原值">¥{{ formatAmount(equipment.originalValue) }}</el-descriptions-item>
            <el-descriptions-item label="使用年限">{{ equipment.usefulLife }}年</el-descriptions-item>
            <el-descriptions-item label="维保周期">{{ equipment.maintenanceCycle }}天</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 维保记录 -->
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>维保记录</span>
              <el-button type="primary" size="small" @click="handleAddMaintenance">
                <el-icon><Plus /></el-icon>
                新增维保
              </el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item 
              v-for="item in maintenanceRecords" 
              :key="item.id"
              :timestamp="item.date"
              :type="item.type"
            >
              <div class="timeline-content">
                <strong>{{ item.title }}</strong>
                <p>{{ item.content }}</p>
                <div class="timeline-meta">
                  <el-tag size="small">{{ item.person }}</el-tag>
                  <span class="cost">费用：¥{{ item.cost }}</span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>

      <!-- 右侧：快速操作 -->
      <el-col :span="8">
        <!-- 快速操作 -->
        <el-card class="info-card">
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="quick-actions">
            <el-button type="primary" block @click="handleInspection">
              <el-icon><View /></el-icon>
              设备巡检
            </el-button>
            <el-button type="success" block @click="handleSpotCheck">
              <el-icon><CircleCheck /></el-icon>
              设备点检
            </el-button>
            <el-button type="warning" block @click="handleMaintenance">
              <el-icon><Tools /></el-icon>
              维护保养
            </el-button>
            <el-button type="danger" block @click="handleRepair">
              <el-icon><Warning /></el-icon>
              故障报修
            </el-button>
          </div>
        </el-card>

        <!-- 下次维保提醒 -->
        <el-card class="info-card">
          <template #header>
            <span>维保提醒</span>
          </template>
          <el-alert 
            :title="`距离下次维保还有 ${remainingDays} 天`"
            :type="remainingDays <= 7 ? 'warning' : 'info'"
            :closable="false"
          >
            <div>下次维保日期：{{ equipment.nextMaintenanceDate }}</div>
          </el-alert>
        </el-card>

        <!-- 操作日志 -->
        <el-card class="info-card">
          <template #header>
            <span>操作日志</span>
          </template>
          <el-timeline>
            <el-timeline-item 
              v-for="log in operationLogs" 
              :key="log.id"
              :timestamp="log.time"
              size="small"
            >
              <strong>{{ log.user }}</strong> {{ log.action }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Printer, Postcard, Edit, View, CircleCheck, Tools,
  Warning, Plus
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 设备数据（模拟）
const equipment = ref({
  id: 1,
  code: 'EQ-CNC-001',
  name: '数控车床',
  category: 'cnc',
  model: 'CK6150',
  brand: '大连机床',
  manufacturer: '大连机床集团',
  purchaseDate: '2024-01-15',
  installDate: '2024-02-01',
  commissionDate: '2024-02-10',
  workshop: '冲压车间',
  location: 'A区-01号位',
  status: 'running',
  manager: '张三',
  operator: '李四',
  oee: 85,
  runningHours: 3256,
  nextMaintenanceDate: '2024-11-15',
  powerRating: '7.5KW',
  voltage: '380V',
  capacity: '100件/小时',
  originalValue: 280000,
  usefulLife: 10,
  maintenanceCycle: 90
})

// 维保记录
const maintenanceRecords = ref([
  {
    id: 1,
    date: '2024-10-01',
    type: 'success',
    title: '定期保养',
    content: '更换润滑油、清洁设备、检查各部件',
    person: '孙八',
    cost: 500
  },
  {
    id: 2,
    date: '2024-08-15',
    type: 'success',
    title: '定期维护',
    content: '检查电气系统、更换磨损部件',
    person: '孙八',
    cost: 1200
  }
])

// 操作日志
const operationLogs = ref([
  { id: 1, user: '张三', action: '更新了设备信息', time: '2024-10-05 14:20' },
  { id: 2, user: '李四', action: '完成设备巡检', time: '2024-10-03 09:30' },
  { id: 3, user: '孙八', action: '完成定期保养', time: '2024-10-01 16:00' }
])

// 计算剩余天数
const remainingDays = computed(() => {
  const next = new Date(equipment.value.nextMaintenanceDate)
  const now = new Date()
  return Math.ceil((next - now) / (1000 * 60 * 60 * 24))
})

// 工具函数
const formatAmount = (amount) => {
  return amount ? amount.toLocaleString('zh-CN') : '0'
}

const getCategoryName = (category) => {
  const map = {
    cnc: '数控设备',
    stamping: '冲压设备',
    welding: '焊接设备',
    assembly: '装配设备',
    testing: '检测设备'
  }
  return map[category] || category
}

const getStatusName = (status) => {
  const map = {
    running: '运行中',
    standby: '待机',
    maintenance: '维护中',
    fault: '故障',
    idle: '闲置'
  }
  return map[status] || status
}

const getStatusColor = (status) => {
  const map = {
    running: 'success',
    standby: 'info',
    maintenance: 'warning',
    fault: 'danger',
    idle: ''
  }
  return map[status] || ''
}

const getOEEColor = (oee) => {
  if (oee >= 85) return '#67c23a'
  if (oee >= 75) return '#e6a23c'
  return '#f56c6c'
}

// 操作方法
const handleBack = () => router.back()
const handlePrint = () => window.print()
const handleQRCode = () => ElMessage.info('二维码生成功能开发中')
const handleEdit = () => router.push(`/equipment/edit/${equipment.value.id}`)
const handleInspection = () => router.push(`/equipment/inspection?id=${equipment.value.id}`)
const handleSpotCheck = () => router.push(`/equipment/spot-check?id=${equipment.value.id}`)
const handleMaintenance = () => router.push(`/equipment/maintenance?id=${equipment.value.id}`)
const handleRepair = () => router.push(`/equipment/repair?id=${equipment.value.id}`)
const handleAddMaintenance = () => ElMessage.info('新增维保记录')
</script>

<style scoped>
.equipment-detail-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.info-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.oee-stat {
  text-align: center;
}

.oee-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.oee-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.timeline-content {
  padding-left: 10px;
}

.timeline-content p {
  margin: 5px 0;
  color: #606266;
}

.timeline-meta {
  display: flex;
  gap: 15px;
  margin-top: 8px;
}

.cost {
  font-size: 13px;
  color: #67c23a;
  font-weight: 600;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

